import React from 'react';
import { renderMarkdown } from '../markdown-renderer';

interface MessageBubbleProps {
  content: string;
  type: 'user' | 'bot';
  timestamp: string;
  markdown?: boolean;
}

export function MessageBubble({ content, type, timestamp, markdown = false }: MessageBubbleProps) {
  const isUser = type === 'user';
  
  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
      <div className={`max-w-[80%] rounded-2xl p-4 ${
        isUser 
          ? 'bg-white/20 border border-white/30 ml-[20%]' 
          : 'bg-white/10 border border-white/20 mr-[20%]'
      }`}>
        <div className={`${markdown ? 'prose prose-invert' : ''} text-sm`}>
          {markdown ? (
            <div dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }} />
          ) : (
            content
          )}
        </div>
        <div className={`text-xs opacity-60 mt-2 ${isUser ? 'text-right' : 'text-left'}`}>
          {timestamp}
        </div>
      </div>
    </div>
  );
}
